<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>positionFilter</title>
</head>

<body>
    <div>
        <ul id="list" class="list">
            <li>list-01</li>
            <li class="item2">list-02</li>
            <li>list-03</li>
            <li class="item4">list-04</li>
            <li>list-05</li>
            <li>list-06</li>
            <li>list-07</li>
            <li>list-08</li>
            <li>list-09</li>
            <li>list-10</li>
        </ul>
    </div>
    <script src="../vendor/jquery-1.12.4.js"></script>
    <script>
    function logTime(cb) {
        console.time('logTime');
        if (typeof cb === 'function') {
            for (var i = 0; i < 10000; i++) {
                cb();
            }
        }
        console.timeEnd('logTime');
    }

    $(function() {

        //        logTime(function () {
        //            $("ul li:even");// slow
        //        })
        //        logTime(function () {
        //            $("ul li:nth-child(odd)");// better
        //        })
        //        logTime(function () {
        //            document.querySelectorAll("ul li:nth-child(odd)"); // best
        //        })
        //        logTime(function () {
        //            $(document.querySelectorAll("ul li:nth-child(odd)")); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('div ul li.item2');// slow
        //        })
        //        logTime(function () {
        //            $('li.item2');// better
        //        })

        //------------------

        //        logTime(function () {
        //            $('.list li.item2'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('#list li.item2'); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('ul.list .item2'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('.list li.item2'); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('ul'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('.list'); // better
        //        })

        //------------------

        logTime(function() { // slow
            $('#list .item2');
            $('#list .item4');
        });

        logTime(function() { // better
            var ul = $('#list');
            ul.find('.item2');
            ul.find('.item4');
        });

    });
    </script>
</body>

</html>
